<template>
  <div class="box">
    <div class="login" id="log">
      <div class="closeArea"></div>
      <div class="loginBox">
        <div class="loginText" id="kong">
          <div class="loginLeft" id="loginLeft">
            <div>
              <p>①</p>
              <p>按身体部位划分疾病</p>
              <p>②</p>
              <p>专门的经验讨论区供用户交流</p>
              <p>③</p>
              <p>疾病视频与疾病知识</p>
              <p>④</p>
              <p>归纳整理收藏信息</p>
            </div>
            <div class="reqBtn" @click="zhuce()">账号密码登陆</div>
          </div>
          <div class="reqRight" id="reqRight">
            <p>人性化疾病库网站<br />学习疾病知识</p>
            <div class="reqBtn" @click="login()" v-show="!isWj">验证码登陆</div>
            <div class="reqBtn" v-show="isWj" @click="dl">直接登陆</div>
          </div>
        </div>
        <div class="loginKard" id="bai">
          <div class="loginRight" id="loginRight">
            <div><img src="../assets/logo_01.png" alt="" /></div>
            <el-form
              class="input"
              :model="ruleForm1"
              :rules="rules1"
              ref="ruleForm1"
            >
              <el-form-item prop="tel">
                <el-input
                  v-model="ruleForm1.tel"
                  ref="tel2"
                  placeholder="手机号/邮箱"
                ></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-row>
                  <el-col :span="12">
                    <el-input
                      v-model="ruleForm1.code"
                      placeholder="验证码"
                      v-on:keydown.enter.native="submitForm('ruleForm1')"
                    ></el-input>
                  </el-col>
                  <el-col :span="12">
                    <p class="code" @click="getCode">{{ getCodeText }}</p>
                  </el-col>
                </el-row>
              </el-form-item>
              <!-- <el-input
                placeholder="请输入密码"
                v-model="pwd"
                show-password
              ></el-input> -->
            </el-form>
            <div class="loginBtn" @click="submitForm('ruleForm1')">登陆</div>
            <!-- <p class="wangji" @click="wj">忘记密码?</p> -->
            <div class="fenxiang">
              <p>
                第三方方式登录:<span class="bi"
                  ><i class="iconfont icon-QQ-circle-fill"></i></span
                ><span class="gi"
                  ><i class="iconfont icon-sign_wechat"></i></span
                ><span class="ri"><i class="iconfont icon-weibo"></i></span>
              </p>
            </div>
          </div>
          <!-- <div class="loginRight" id="loginRight" v-if="isWj">
            <div><img src="../assets/logo_01.png" alt="" /></div>
            <div class="input" >
              <el-input v-model="tel" placeholder="手机号/邮箱"></el-input>

              <el-row>
                <el-col :span="12">
                  <el-input
                    v-model="code"
                    placeholder="请输入验证码"
                  ></el-input>
                </el-col>
                <el-col :span="12">
                  <p class="code" @click="dialogVisible = true">获取验证码</p>
                </el-col>
              </el-row>
              <el-input
                placeholder="请输入密码"
                v-model="pwd"
                show-password
              ></el-input>
              <el-input
                placeholder="确认密码"
                v-model="qrpwd"
                show-password
              ></el-input>
            </div>
            <div class="loginBtn" @click="retrieve">重新找回</div>
          </div> -->
          <div class="reqLeft" id="reqLeft" v-if="!isWj">
            <div><img src="../assets/logo_01.png" alt="" /></div>
            <el-form
              class="formBox input"
              :model="ruleForm2"
              :rules="rules2"
              ref="ruleForm2"
            >
              <el-form-item prop="tel">
                <el-input
                  v-model="ruleForm2.tel"
                  ref="tel1"
                  placeholder="手机号/邮箱"
                ></el-input>
              </el-form-item>

              <!-- <el-row>
                <el-col :span="14">
                  <el-input
                    v-model="code"
                    placeholder="请输入验证码"
                  ></el-input>
                </el-col>
                <el-col :span="10">
                  <p class="code">获取验证码</p>
                </el-col>
              </el-row> -->
              <el-form-item prop="pwd">
                <el-input
                  placeholder="密码"
                  v-model="ruleForm2.pwd"
                  show-password
                  v-on:keydown.enter.native="submitForm('ruleForm2')"
                ></el-input>
              </el-form-item>

              <!-- <el-input
                placeholder="确认密码"
                v-model="qrpwd"
                show-password
              ></el-input> -->
            </el-form>
            <div class="loginBtn" @click="submitForm('ruleForm2')">
              立即登陆
            </div>
            <!-- <p class="wangji" @click="wj">忘记密码?</p> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 滑块验证 -->
    <el-dialog
      title="验证"
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <slide-verify
        :l="42"
        :r="10"
        :w="350"
        :h="205"
        ref="slideverify"
        @success="onSuccess"
        @fail="onFail"
        slider-text="向右滑动完成验证"
      ></slide-verify>
    </el-dialog>
  </div>
</template>

<script>
import qs from "qs";
export default {
  inject: ["reload"],
  data() {
    return {
      ruleForm1: {
        tel: null,
        code: null,
      },
      rules1: {
        tel: [{ required: true, message: "请输入账号", trigger: "change" }],
        code: [{ required: true, message: "请输入验证码", trigger: "change" }],
      },
      ruleForm2: {
        tel: null,
        pwd: null,
      },
      rules2: {
        tel: [{ required: true, message: "请输入账号", trigger: "change" }],
        pwd: [{ required: true, message: "请输入密码", trigger: "change" }],
      },
      tel: null,
      pwd: null,
      code: null,
      qrpwd: null,
      isWj: false,
      dialogVisible: false, //验证码框
      getCodeText: "获取验证码", //文字
      time: 60, //剩余时间
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName == "ruleForm2") {
            this.login1();
          } else if (formName == "ruleForm1") {
            this.login2();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //关闭弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          //重置图片验证
          this.$refs.slideverify.reset();
        })
        .catch((_) => {});
    },
    //点击获取验证码
    getCode() {
      let t1;
      if (this.getCodeText == "获取验证码") {
        this.dialogVisible = true;
        t1 = setInterval(() => {
          this.time--;
          this.getCodeText = "重新获取（" + this.time + "）";
          //清除定时器
          if (this.time == 0) {
            this.time = 60;
            clearInterval(t1);
            this.getCodeText = "获取验证码";
          }
        }, 1000);
      }
    },
    //图片验证成功
    async onSuccess() {
      this.dialogVisible = false;
      this.$refs.slideverify.reset();
      //发送验证码
      this.$axios({
        method: "post",
        url: "/user/send",
        data: qs.stringify({ value: this.ruleForm1.tel }),
      }).then((res) => {
        console.log(res);
        if (res.code != "200") {
          this.$message.error(res.msg);
        } else {
          //成功后的逻辑代码
          this.$message({
            message: "验证码已发送",
            type: "success",
          });
        }
      });
    },
    //验证失败
    onFail() {
      this.$message.error("验证失败");
      //失败后的逻辑代码
    },
    //账号密码登录
    login1() {
      this.$axios({
        method: "post",
        url: "/user/loginByPassword",
        data: qs.stringify({
          phone: this.ruleForm2.tel,
          password: this.ruleForm2.pwd,
        }),
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          //存储信息
          this.$setStorage("userinfo", { ...res.data, ...res.detail });
          this.$setStorage("token", res.token);
          this.$setStorage("isLogin", true);
          //提示
          this.$message({
            message: "登录成功",
            type: "success",
          });
          //路由跳转
          this.reload();
          this.$router.go(-1);
          this.ruleForm2.pwd = "";
          //修改登录状态
          this.$store.commit("changeLog", true);
        } else if (res.code == "5021") {
          this.$message.error("请使用验证码方式登录一键注册");
          //账号赋值
          this.ruleForm1.tel = this.ruleForm2.tel;
          this.login();
        } else if (res.code == "5022") {
          this.$message.error(res.msg);
        }
      });
    },
    //手机号验证码登录
    login2() {
      this.$axios({
        method: "post",
        url: "/user/loginByCode",
        data: qs.stringify({
          code: this.ruleForm1.code,
          value: this.ruleForm1.tel,
        }),
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          //存储信息
          this.$setStorage("userinfo", { ...res.data, ...res.detail });
          this.$setStorage("token", res.token);
          this.$setStorage("isLogin", true);
          //提示
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.reload();
          //清除code
          this.code = "";
          //路由跳转
          this.$router.go(-1);
          //修改登录状态
          this.$store.commit("changeLog", true);
        }
      });
    },
    //找回密码
    retrieve() {},
    wj() {
      // this.isWj = true;
    },
    dl() {
      this.isWj = false;
    },
    zhuce() {
      var bai = document.getElementById("bai");
      var kong = document.getElementById("kong");
      var loginLeft = document.getElementById("loginLeft");
      var reqRight = document.getElementById("reqRight");
      var loginRight = document.getElementById("loginRight");
      var reqLeft = document.getElementById("reqLeft");
      //左右移动
      kong.className = "beRight1 loginText";
      bai.className = "beLeft1 loginKard";

      //显示隐藏
      loginLeft.className = "opacityDiv loginLeft";
      reqRight.className = "opacityShowDiv reqRight";
      loginRight.className = "opacityDiv loginRight";
      reqLeft.className = "opacityShowDiv reqLeft";

      loginRight.style.zIndex = 999991;
      reqLeft.style.zIndex = 999992;

      this.$nextTick(function () {
        // 页面更新后调用
        this.$refs.tel1.focus();
      });
    },
    login() {
      this.isWj = false;
      this.$nextTick(function () {
        // 页面更新后调用
        this.$refs.tel2.focus();
      });
      var bai = document.getElementById("bai");
      var kong = document.getElementById("kong");
      var loginLeft = document.getElementById("loginLeft");
      var reqRight = document.getElementById("reqRight");
      var loginRight = document.getElementById("loginRight");
      var reqLeft = document.getElementById("reqLeft");
      //左右移动
      kong.className = "beLeft2 loginText";
      bai.className = "beRight2 loginKard";

      //显示隐藏
      loginLeft.className = "opacityShowDiv loginLeft";
      reqRight.className = "opacityDiv reqRight";
      loginRight.className = "opacityShowDiv loginRight";
      reqLeft.className = "opacityDiv reqLeft";

      loginRight.style.zIndex = 999992;
      reqLeft.style.zIndex = 999991;
    },
    showLogin() {
      var login1 = document.getElementById("log");
      login1.style.display = "block";
    },
    closeLogin() {
      var login1 = document.getElementById("log");
      login1.style.display = "none";
    },
  },
  mounted() {
    this.$nextTick(function () {
      // 页面更新后调用
      this.$refs.tel2.focus();
    });
  },
};
</script>

<style lang="less" scoped>
/* html,
body {
    font-size: 62.5%;
} */
.box {
  user-select: none;
}
@import url("../less/login.less");
</style>